<template>
    <div class="container">
        <div class="form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <el-form-item :label-width="width" label="身份证号码" prop="idcard">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.idcard" size="small" placeholder="请输入身份证号码" @blur="idcardBlur"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="适任证书号码" prop="certificate">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.certificate" size="small" placeholder="请输入适任证书号"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="海员证号码(SIB)" prop="sib">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.sib" size="small" placeholder="请输入海员证号码" @blur="sibBlur"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="姓名" prop="name">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.name" placeholder="请输入姓名" size="small"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="姓名（英文）" prop="ename">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.ename" placeholder="请输入姓名（英文）" size="small"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="职务" prop="zhiwu">
                    <el-select v-model="ruleForm.zhiwu" placeholder="请选择" size="small" clearable filterable>
                        <el-option v-for="item in zhiwuList" :key="item.id" :label="item.name"
                                   :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label-width="width" label="个人" prop="self">
                    <el-radio-group v-model="ruleForm.self">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label-width="width" label="船东" prop="chuandong" v-if="ruleForm.self == '否'">
                    <el-select v-model="ruleForm.chuandong" placeholder="请选择" size="small" clearable filterable>
                        <el-option v-for="item in chuandongList" :key="item.id" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label-width="width" label="代理公司" prop="daili" v-if="ruleForm.self == '否'">
                    <el-select v-model="ruleForm.daili" placeholder="请选择" size="small" clearable filterable>
                        <el-option v-for="item in dailiList" :key="item.id" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label-width="width" label="电话" prop="tel">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.tel" size="small" placeholder="请输入手机号码"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="邮箱地址" prop="email">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.email" size="small" placeholder="请输入邮箱地址"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="QQ" prop="qq">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.qq" size="small" placeholder="请输入QQ码"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="地址" prop="address">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.address" size="small" placeholder="请输入地址"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label-width="width" label="是否有沟通" prop="talk">
                    <el-radio-group v-model="ruleForm.talk">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label-width="width" label="意向课程" >
                    <el-select v-model="ruleForm.intention" placeholder="请选择" size="small" multiple filterable>
                        <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item v-for="(item,index) in ruleForm.intention" :label-width="width" label="意向课程" :key="item.key">
                    <el-select v-model="item.value" placeholder="请选择" size="small">
                        <el-option v-for="item in courseList" :key="item.id" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                    <el-button @click="removeintention(item)" size="small"><img src="../../img/del.png"/></el-button>
                    <el-button @click="addintention" size="small"><img src="../../img/add.gif"/></el-button>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="import">
            <img src="../../img/trainee.png" class="img"/>
            <el-upload class="upload-demo" ref="upload" :action="fileAction" :on-change="fileUploadChange"
                       :file-list="fileList" :auto-upload="false" :on-success="fileUploadSuccess"
                       :on-remove="fileRemove">
                <el-button type="primary" slot="trigger" @click="fileList=[]">选择文件</el-button>
                <el-button type="success" @click="submitfiles" :disabled="subDisabled">批量导入</el-button>
                <div slot="tip" class="el-upload__tip">只能上传Excel文件,格式如上图!</div>
            </el-upload>
        </div>
    </div>

</template>
<script>
    export default {
        data() {
            var validate = (rule, value, callback) => {
                if (value === '' && this.ruleForm.idcard === '') {
                    callback(new Error('身份证号与海员号至少填一项'));
                } else {
                    callback();
                }
            };
            var validate1 = (rule, value, callback) => {
                if (value === '' && this.ruleForm.name === '') {
                    callback(new Error('中文姓名与英文姓名至少填一项'));
                } else {
                    callback();
                }
            };
            var idcard_validate = (rule, value, callback) => {
                if (value != '') {
                    let patt = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                    if(!patt.test(value)){
                        callback(new Error('请输入正确的身份证号码'));
                    }else{
                        callback();
                    }
                    
                } else {
                    callback();
                }
            };

            return {
                ruleForm: {
                    idcard: '',
                    certificate: '',
                    sib: '',
                    name: '',
                    ename: '',
                    zhiwu: '',
                    self: '',
                    chuandong: '',
                    daili: '',
                    tel: '',
                    email: '',
                    qq: '',
                    address: '',
                    talk: '',
                    intention: [],
                },
                rules: {
                    idcard: [
                        {validator: idcard_validate, trigger: 'blur'}
                    ],
                    sib: [
                        {validator: validate, trigger: 'blur'}
                    ],
                    ename: [
                        {validator: validate1, trigger: 'blur'}
                    ],
                },
                zhiwuList: [],
                chuandongList: [],
                dailiList: [],
                courseList: [],
                width: '120px',
                span: 10,
                fileList: [],
                fileAction: PATH + 'Trainee/traineeImport',
                subDisabled: true,
            }
        },
        created() {
            this.getZhiwuList();
            this.getChuandongList();
            this.getDailiList();
            this.getCourseList()
        },
        methods: {
            getZhiwuList() {
                this.apiPost('System/zhiwuLists').then(res => {
                    this.zhiwuList = res
                })
            },
            getChuandongList() {
                this.apiPost('System/chuandongLists').then(res => {
                    this.chuandongList = res
                })
            },
            getDailiList() {
                this.apiPost('System/dailiLists').then(res => {
                    this.dailiList = res
                })
            },
            getCourseList() {
                this.apiPost('System/courseLists').then(res => {
                    this.courseList = res
                })
            },
            addintention() {
                this.ruleForm.intention.push({
                    value: '',
                    key: Date.now()
                });
            },
            removeintention(item) {
                var index = this.ruleForm.intention.indexOf(item)
                if (index !== -1 && this.ruleForm.intention.length > 1) {
                    this.ruleForm.intention.splice(index, 1)
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.apiPost('Trainee/traineeAdd', this.ruleForm).then(res => {
                            let remind = res.error ? 'error' : 'success'
                            _g.toastMsg(remind, res.msg)
                            if (!res.error) {
                                router.replace('/trainee/list')
                            }
                        })
                    } else {
                        //console.log('error submit!!');

                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },


            /* 图片上传 */
            fileUploadChange(file, fileList) {
                if (fileList.length > 1) {
                    _g.toastMsg('warning', '每次限上传一个文件')
                }
                this.subDisabled = fileList.length !== 1;
            },
            fileRemove(file, fileList) {
                this.subDisabled = fileList.length !== 1;
            },
            fileUploadSuccess(res) {
                _g.closeGlobalLoading();
                let remind = res.error ? 'error' : 'success';
                _g.toastMsg(remind, res.msg);
                if (!res.error) {
                    this.fileList = [];
                    setTimeout(() => {
                        this.subDisabled = true;
                    }, 0);
                } else {
                    this.fileList = [];
                    setTimeout(() => {
                        this.subDisabled = true;
                    }, 0);
                }
            },
            submitfiles() {
                this.$refs.upload.submit();
            },

            /**
             * 身份证号输入完成请求判断有没有重复的身份证号
             */
            idcardBlur(){
                let patt = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                if(!patt.test(this.ruleForm.idcard)){
                    return false;
                }
                let data = {
                    idcard: this.ruleForm.idcard
                }
                this.apiPost('system/checkTraineeIdcard', data).then(res=>{
                    if(res){
                        this.$alert('是否跳转到该学员详情', '身份证号已存在', {
                            confirmButtonText: '确定',
                            callback: action => {
                                router.push('/trainee/detail/'+res)
                            }
                        });
                    }
                })
            },

            /**
             * SIB输入完成请求判断有没有重复的SIB
             */
            sibBlur(){
                if(this.ruleForm.sib){
                    let data = {
                        sib: this.ruleForm.sib
                    }
                    this.apiPost('system/checkTraineeSib', data).then(res=>{
                        if(res){
                            this.$alert('是否跳转到该学员详情', 'SIB已存在', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    router.push('/trainee/detail/'+res)
                                }
                            });
                        }
                    })
                }
            }
        },
    }


</script>
<style lang="css" scoped>

    .container {
        padding: 20px;
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        min-height: 820px;
    }

    .form {
        float: left;
        width: 50%;
    }

    .img-wrapper {
        display: inline-block;
        height: 26px;
        line-height: 26px;
    }

    .img-wrapper img {
        vertical-align: middle;
        padding-left: 10px;
        width: 16px;
        height: 16px;
    }

    .import {
        float: right;
        width: 50%;
        height: 100%;
    }

    .img {
        width: 95%;
        margin: 0 5% 0 0;

    }

    .upload-demo {
        margin: 5% auto;
    }
</style>
